<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./fonts/icomoon.css" />
  <style>
    .jinsewangke {
      position: relative;
      top: -30px;
    }

    .jinsewangkes {
      position: relative;
      top: -40px;
    }

    .jinsewangkess {
      position: relative;
      top: -120px;
    }
  </style>
  <script src="./js/echarts.min.js"></script>

  <!-- <script src="./js/jquery.min.js"></script> -->

  <script src="./js/myrem.js"></script>

  <script src="./js/china.js"></script>

  <script src="./js/date.js"></script>
  <script src="./js/townList.js"></script>


  <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

  <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
  <script src="./js/jquery.min.js"></script>

  <!-- 饼图 -->
  <script src="./js/pie.js"></script>
  <!-- 监控视频 -->
  <script src="monitoringVideo/ezuikit.js"></script>

  <!-- 充电占比 -->
  <script src="./js/rechargeAnswer.js"></script>

  <!-- 预警统计-->
  <script src="./js/preWarningSystem.js"></script>

  <!-- 中间大屏总数字-->
  <script src="./js/totalNum.js"></script>

  <!-- <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=z08ArBHGfGhiC5UOiqkKfLCPMOizVGBO"></script> -->

  <!-- 高德地图  引入js的api-->
  <script type="text/javascript">
    window._AMapSecurityConfig = {//您的代理服务器域名或地址
      securityJsCode: '914e24ef9e184ba47f15fcc4a5dd39e9',//高德地图密钥
    }
  </script>
  <script
    src="https://webapi.amap.com/maps?v=1.4.8&key=28c8e7abcbf39798c42548038e097819&plugin=AMap.MouseTool&plugin=AMap.Geocoder"></script>

  <!-- 百度地图 -->
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PU924Omqzi2NhOClcTdNfd0HWOBPPQ1d"></script>

  <style>
    /* 流光线条start */
    .light-line {
      position: relative;
      top: 6px;
      left: 90px;
      width: 63%;

    }

    .light-line-r {
      position: absolute;
      top: 20px;
      left: 360px;
      width: 320px;
      height: 320px;
    }

    /* 渐变流光效果线条，要将横向宽度设置为超过100%的值，否则无动画效果 */
    .line-block {
      position: relative;
      width: 100%;
      height: 4px;
      background: linear-gradient(-90deg,
          #26a1da 1%, aqua 4%, transparent 12%, transparent 16%,
          #26a1da 16%, aqua 19%, transparent 27%, transparent 33%,
          #26a1da 33%, aqua 36%, transparent 44%, transparent 50%,
          #26a1da 50%, aqua 53%, transparent 61%, transparent 66%,
          #26a1da 66%, aqua 69%, transparent 77%, transparent 84%,
          #26a1da 84%, aqua 87%, transparent 95%, transparent 100%);
      background-size: 200% 100%;
    }

    /* 指定使用Gradient动画，5s完成一次动画，匀速，无限循环 */
    .gradient {
      animation: Gradient 8s linear infinite;
      -webkit-animation: Gradient 8s linear infinite;
      -moz-animation: Gradient 8s linear infinite;
    }

    /* 定义Gradient动画效果：初始时显示最右端，结束时显示最左端（向右滚动） */
    @keyframes Gradient {
      0% {
        background-position: 100% 100%;
      }

      100% {
        background-position: 0% 100%;
      }
    }

    /* 兼容写法.. */
    @-webkit-keyframes Gradient {
      0% {
        background-position: 100% 100%;
      }

      100% {
        background-position: 0% 100%;
      }
    }

    /* 兼容写法.. */
    @-moz-keyframes Gradient {
      0% {
        background-position: 100% 100%;
      }

      100% {
        background-position: 0% 100%;
      }
    }

    .right-top {
      transform: rotate(0deg);
    }

    .right-top-r {
      transform: rotate(0deg) rotateY(180deg);
    }

    /* 流光线条end */





    /* leaflet地图的样式 */
    /* .tabActive {
            background-color: #2543cad5;
            color: #fac328;
          } */
    .anchorBL {
      /* 隐藏地图下面的文字 */
      display: none;
    }

    #indexMap {
      height: 1000px;
      width: 1000px;
    }





    .leaflet-control-attribution {
      display: none !important;
    }

    .my_tooltip {
      color: #fff;
      background: transparent;
      border: none;
      font-size: 18px;
      box-shadow: none;
    }

    .my_tooltip::before {
      display: none;
    }

    #btn {
      position: absolute;
      top: 0;
      right: 0.83rem;
      z-index: 999;
    }

    #PositionBtn {
      position: absolute;
      top: 30px;
      right: 0.83rem;
      z-index: 999;
    }

    #mySelect {
      position: absolute;
      top: 60px;
      right: 0.83rem;
      z-index: 999;
      text-align: center;
    }

    #cenTitleText {
      height: 40px;
      text-align: center;
      display: flex;
      justify-content: space-around;
    }

    .cenTitleTextLeft {
      display: flex;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;
      min-width: 70px;
      max-width: 90px;
    }

    .cenTitleTextLeft_img {
      width: 35px;
      height: 28px;

    }

    .cenTitleTextLeft_p {
      font-size: 12px;
      transform: scale(0.7);
      position: relative;
      top: -3px;

    }

    .cenTitleTextContent {
      height: 40px;
      text-align: center;
      line-height: 40px;
      display: inline-block;
      /* color: rgb(31, 204, 216) !important; */
    }

    .cenTitleTextRight {
      height: 40px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;
      min-width: 70px;
      max-width: 90px;
    }

    .cenTitleTextRight_text {
      font-size: 12px !important;
      color: rgb(16, 224, 61) !important;
    }

    .cenTitleTextRight_img {
      width: 12px;
      height: 12px;
      position: relative;
      top: -5px;
    }

    .deviceUl {
      margin-bottom: 10px;
    }

    .deviceLi {

      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;

    }

    .deviceLi1 {
      height: 35px;
      width: 3px;
      background-color: aqua;
    }

    .deviceLi_twoDiv {
      display: flex;
      justify-content: space-around;
      text-align: center;
    }

    .deviceLi_twoDiv_oneSpan {
      display: inline-block;
      font-size: 12px !important;
      color: #fff !important;
      text-align: center !important;
    }

    .deviceLi_twoDiv_oneSpan1 {
      display: inline-block;
      font-size: 21px !important;
      color: #28fe14 !important;
      position: relative;
      left: -5px;
    }

    .deviceLi_twoDiv_twoSpan {
      display: inline-block;
      font-size: 12px !important;
      transform: scale(0.8);
      color: red !important;
      position: relative;
      top: 7px;
    }

    .deviceLi_twoDiv_twoSpan1 {
      display: inline-block;
      font-size: 12px !important;
      transform: scale(0.9);
      color: red !important;
      position: relative;
      left: -3px;
    }

    /* 运营数据start */
    .leftTopTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px !important;
      background-color: #120670;
    }

    .leftTopTitle_oneDiv {
      margin-left: 5px;
      font-size: 12px;
      transform: scale(0.8);
    }

    .wrapper {
      display: inline-flex;
      list-style: none;
      font-family: "Poppins", sans-serif;
      justify-content: center;
      margin-right: 3px;
      font-size: 12px;
    }

    .wrapper .icon {
      position: relative;
      background: #74dae5;
      /* border-radius: 50%; */
      transform: skew(-27deg)scale(0.7);
      /* margin-left: 5px; */
      width: 45px;
      height: 20px;
      font-size: 12px;
      color: #000;
      /* font-weight: 600; */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .wrapper .tooltip {
      position: absolute;
      top: 0;
      font-size: 12px;
      background: #fff;
      color: #fff;
      padding: 5px 8px;
      border-radius: 5px;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    /* 运营数据---弹框 start*/
    .wrapper .tooltip::before {

      position: absolute;
      content: "";
      height: 8px;
      width: 8px;
      background: #fff;
      bottom: -3px;
      left: 50%;
      transform: translate(-50%) rotate(45deg);
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .wrapper .icon:hover .tooltip {

      font-size: 12px;
      top: -45px;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      width: 55px;
      text-align: center;
      /* transform: rotate(180deg); */
    }

    .wrapper .icon:hover span,
    .wrapper .icon:hover .tooltip {
      text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);

    }

    .wrapper .facebook:hover,
    .wrapper .facebook:hover .tooltip,
    .wrapper .facebook:hover .tooltip::before {
      background: #1877F2;
      color: #fff;

    }

    .wrapper .twitter:hover,
    .wrapper .twitter:hover .tooltip,
    .wrapper .twitter:hover .tooltip::before {
      background: #15d846;
      color: #fff;
    }

    .wrapper .instagram:hover,
    .wrapper .instagram:hover .tooltip,
    .wrapper .instagram:hover .tooltip::before {
      background: #E4405F;
      color: #fff;

    }

    /* 运营数据---弹框 end*/
    /* 运营数据end */

    /* 旋转圆start */
    .cenTitleTop {
      position: absolute;
      left: 2%;
      top: 1.5%;
      transform: scale(0.18);
    }

    .svg-frame {
      position: relative;
      width: 344px;
      height: 344px;
      transform-style: preserve-3d;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .svg-frame svg {
      position: absolute;
      transition: .5s;
      z-index: calc(1 - (0.2 * var(--j)));
      transform-origin: center;
      width: 344px;
      height: 344px;
      fill: none;
    }

    .svg-frame:hover svg {
      transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
    }

    .svg-frame svg #center {
      transition: .5s;
      transform-origin: center;
    }

    .svg-frame:hover svg #center {
      transform: rotate(-30deg) translateX(45px) translateY(-3px);
    }

    #out2 {
      animation: rotate16 7s ease-in-out infinite alternate;
      transform-origin: center;
    }

    #out3 {
      animation: rotate16 3s ease-in-out infinite alternate;
      transform-origin: center;
      stroke: #ff0;
    }

    #inner3,
    #inner1 {
      animation: rotate16 4s ease-in-out infinite alternate;
      transform-origin: center;
    }

    #center1 {
      fill: #ff0;
      animation: rotate16 2s ease-in-out infinite alternate;
      transform-origin: center;
    }

    @keyframes rotate16 {
      to {
        transform: rotate(360deg);
      }
    }

    /* 旋转圆end */

    /* 旋转饼图start */
    .cenTitleTop1 {
      position: absolute;
      right: 2%;
      top: 1.5%;
      transform: scale(0.18);
    }

    .loader {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
      width: 300px;
      border-radius: 50%;
      box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
        inset 10px 10px 10px rgba(0, 0, 0, 0.1);
    }

    .loader::before {
      content: "";
      position: absolute;
      height: 200px;
      width: 200px;
      border-radius: 50%;
      box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
        10px 10px 10px rgba(0, 0, 0, 0.1);
    }

    .blue {
      height: 186px;
      width: 220px;
      position: absolute;
      animation: rotate 5s linear infinite;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    .blue::before {
      content: "";
      position: absolute;
      height: 30px;
      border-radius: 50%;
      width: 30px;
      background: linear-gradient(45deg, #336dff, #5c89ff);
      box-shadow: 0 5px 10px rgb(0 0 0 / 30%);


    }

    /* 旋转饼图end */
  </style>
</head>

<body>
  <div class="layout">

    <!-- 左边 -->
    <div class="cloumn">
      <!-- 区设备统计情况 -->
      <div class="leftTopTitle">
        <div class="leftTopTitle_oneDiv">运营数据</div>
        <ul class="wrapper leftTopTitle_twoDiv">
          <li class="icon facebook">
            <span class="tooltip">今天</span>
            <span><i class="fab fa-facebook-f">今天</i></span>
          </li>
          <li class="icon twitter">
            <span class="tooltip">近7天</span>
            <span><i class="fab fa-twitter">近7天</i></span>
          </li>
          <li class="icon instagram">
            <span class="tooltip">近30天</span>
            <span><i class="fab fa-instagram">近30天</i></span>
          </li>
        </ul>
      </div>
      <div id="first_level" class="townBaseinfo borderimage">
        <div class="title">区设备统计情况</div>
        <!-- 充电柜数据 -->
        <div style="height: 22%">
          <div style="font-size: 12px;transform: scale(0.9);margin: 4px;">充电柜数据:</div>
          <div style="display:flex;justify-content: space-around;transform: scale(1,0.9);">
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">充电用户</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">356</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">11.2%</span>
                </li>
              </ul>
            </div>
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">充电次数</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">405</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">10.6%</span>
                </li>
              </ul>
            </div>
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">新增用户</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">23</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">9.4%</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="container" style="height: 100%;"></div>
          <script type="text/javascript"
            src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
          <div style="font-size: 12px;text-align: center;transform: scale(0.6);">充电订单（次）</div>
        </div>
        <!-- 充电桩数据 -->
        <div style="height: 22%;position: relative;top: 72px;">
          <div style="font-size: 12px;transform: scale(0.9);margin: 4px;">充电桩数据:</div>
          <div style="display:flex;justify-content: space-around;transform: scale(1,0.9);">
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">充电用户</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">3213</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">12.6%</span>
                </li>
              </ul>
            </div>
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">充电次数</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">3436</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">13.4%</span>
                </li>
              </ul>
            </div>
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">新增用户</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">236</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">13.4%</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="container1" style="height: 100%;"></div>
          <script type="text/javascript"
            src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
          <div style="font-size: 12px;text-align: center;transform: scale(0.6);">充电订单（次）</div>
        </div>
        <!-- 换电柜数据 -->
        <div style="height: 22%;position: relative;top: 144px;">
          <div style="font-size: 12px;transform: scale(0.9);margin: 4px;">换电柜数据:</div>
          <div style="display:flex;justify-content: space-around;transform: scale(1,0.9);">
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">充电用户</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">413</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">11.2%</span>
                </li>
              </ul>
            </div>
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">充电次数</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">648</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">10.6%</span>
                </li>
              </ul>
            </div>
            <div style="display:flex;justify-content: flex-start;text-align: center;">
              <ul style="text-align: center;">
                <li><img style="width: 25px;height: 17px;" src="./images/twoUser.png" alt=""></li>
                <li style="font-size: 12px;transform:scale(0.6);position: relative;top: -5px;">新增用户</li>
              </ul>
              <ul style="position: relative;top: -2px;left: -9px;">
                <li style="font-size: 17px;font-weight: 600;color: aqua;">16</li>
                <li style="display:flex;justify-content: space-around;text-align: center;position: relative;top: -3px;">
                  <img style="width: 11px;height: 7px;position: relative;top: 5px;" src="./images/greenTop.png" alt="">
                  <span style="font-size: 12px;color: rgb(22, 228, 74);transform: scale(0.7);">9.4%</span>
                </li>
              </ul>
            </div>
          </div>
          <div id="container2" style="height: 100%;"></div>
          <script type="text/javascript"
            src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
          <div style="font-size: 12px;text-align: center;transform: scale(0.6);">充电订单（次）</div>
        </div>
      </div>

      <!-- 点击地图的点出现在左边的   镇-设备运行情况（自己设数据）、设备详情（后台拿）  、 设备故障统计（自己设数据）-->
      <div id="second_level" style="display: none">
        <!-- 第一  镇-设备运行情况-->
        <div class="lFirstBox borderimage">
          <div class="title">镇-设备运行情况</div>
          <ul class="">
            <li class="">
              <div>充电柜:</div>
              <div>在线<span class="chargingOnline">1</span></div>
              <div>离线 <span class="chargingNoline">3</span></div>
            </li>
            <li class="">
              <div>换电柜:</div>
              <div>在线<span class="chargeOnline">0</span></div>
              <div>离线 <span class="chargeNoline">1</span></div>
            </li>
            <li class="">
              <div>充电桩:</div>
              <div>在线<span>1</span></div>
              <div>离线 <span>24</span></div>
            </li>
          </ul>
        </div>
        <!-- 第二 设备详情-->
        <div class="lSecondBox borderimage">
          <div class="faultInfo" id="faultInfo">
            <div class="title">设备详情</div>
            <div class="content"></div>
          </div>
        </div>
        <!-- 第三 设备故障统计-->
        <div class="lthirdlyBox borderimage">

          <div class="faultStat" id="faultStat">
            <div class="title">设备故障统计</div>
            <div class="content">
              <div class="data">
                <div class="left">
                  <div class="bigBox">
                    <div class="box1">
                      <div>充电桩故障</div>
                      <div>0</div>
                    </div>
                    <div class="box2">
                      <div>充电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box3">
                      <div>换电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box4">
                      <div>监控--设备</div>
                      <div>0</div>
                    </div>
                  </div>
                </div>
                <div class="center">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
                <div class="right">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
              </div>
              <div class="state">
                <div class="left">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已完成</div>
                </div>
                <div class="center">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">未处理</div>
                </div>
                <div class="right">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已处理</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 假数据 -->
      <div id="second_level1" style="display: none">
        <!-- 第一  镇-设备运行情况-->
        <div class="lFirstBox borderimage">
          <div class="title">镇-设备运行情况</div>
          <ul class="">
            <li class="">
              <div>充电柜:</div>
              <div>在线<span class="chargingOnline">1</span></div>
              <div>离线 <span class="chargingNoline">3</span></div>
            </li>
            <li class="">
              <div>换电柜:</div>
              <div>在线<span class="chargeOnline">0</span></div>
              <div>离线 <span class="chargeNoline">1</span></div>
            </li>
            <li class="">
              <div>充电桩:</div>
              <div>在线<span>25</span></div>
              <div>离线 <span>0</span></div>
            </li>
          </ul>
        </div>
        <!-- 第二 设备详情-->
        <div class="lSecondBox borderimage">
          <div class="faultInfo" id="faultInfo1">
            <div class="title">设备详情</div>
            <div class="content">
              <p>设备名称: <span>展厅测试换电柜</span></p>
              <p>设备地址: <span>番禺实验中学</span></p>
              <!-- <p>设备状态: <span>离线</span></p> -->
              <p>设备类型: <span>换电柜/离线</span></p>
              <p>使用时间: <span> 213天17小时56分钟</span></p>
              <p>空仓: <span>1</span></p>
              <p>充电中: <span>2</span></p>
              <p>未关门: <span>0</span></p>
              <p>满电: <span>0</span></p>
              <p>故障仓: <span>9</span></p>
              <p>总订单: <span>5</span></p>
              <p>收费标准: <span>充电柜1元3小时, 换电柜月租299</span></p>
            </div>
          </div>
        </div>
        <!-- 第三 -->
        <div class="lthirdlyBox borderimage">
          <!-- 设备故障统计 -->
          <div class="faultStat" id="faultStat">
            <div class="title">设备故障统计</div>
            <div class="content">
              <div class="data">
                <div class="left">
                  <div class="bigBox">
                    <div class="box1">
                      <div>充电桩故障</div>
                      <div>0</div>
                    </div>
                    <div class="box2">
                      <div>充电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box3">
                      <div>换电柜故障</div>
                      <div>0</div>
                    </div>
                    <div class="box4">
                      <div>监控--设备</div>
                      <div>0</div>
                    </div>
                  </div>
                </div>
                <div class="center">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
                <div class="right">
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                  <div>0</div>
                </div>
              </div>
              <div class="state">
                <div class="left">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已完成</div>
                </div>
                <div class="center">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">未处理</div>
                </div>
                <div class="right">
                  <div class="bgcColor"></div>
                  <div style="font-size: 0.5rem">已处理</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 中间分布图 -->
    <div class="cen cloumn" style="position: relative">
      <!-- 第一层--地图上面-- 旋转圆--总数量--旋转饼图--流光 ---在线离线 -->

      <!-- 总数量 -->
      <div class="cenTitle">
        <!-- 旋转圆 -->
        <div class="cenTitleTop">
          <div class="svg-frame">
            <svg style="--i:0;--j:0;">
              <g id="out1">
                <path
                  d="M72 172C72 116.772 116.772 72 172 72C227.228 72 272 116.772 272 172C272 227.228 227.228 272 172 272C116.772 272 72 227.228 72 172ZM197.322 172C197.322 158.015 185.985 146.678 172 146.678C158.015 146.678 146.678 158.015 146.678 172C146.678 185.985 158.015 197.322 172 197.322C185.985 197.322 197.322 185.985 197.322 172Z">
                </path>
                <path mask="url(#path-1-inside-1_111_3212)" stroke-miterlimit="16" stroke-width="2" stroke="#00FFFF"
                  d="M72 172C72 116.772 116.772 72 172 72C227.228 72 272 116.772 272 172C272 227.228 227.228 272 172 272C116.772 272 72 227.228 72 172ZM197.322 172C197.322 158.015 185.985 146.678 172 146.678C158.015 146.678 146.678 158.015 146.678 172C146.678 185.985 158.015 197.322 172 197.322C185.985 197.322 197.322 185.985 197.322 172Z">
                </path>
              </g>
            </svg>

            <svg style="--i:1;--j:1;">
              <g id="out2">
                <mask fill="white" id="path-2-inside-2_111_3212">
                  <path
                    d="M102.892 127.966C93.3733 142.905 88.9517 160.527 90.2897 178.19L94.3752 177.88C93.1041 161.1 97.3046 144.36 106.347 130.168L102.892 127.966Z">
                  </path>
                  <path
                    d="M93.3401 194.968C98.3049 211.971 108.646 226.908 122.814 237.541L125.273 234.264C111.814 224.163 101.99 209.973 97.2731 193.819L93.3401 194.968Z">
                  </path>
                  <path
                    d="M152.707 92.3592C140.33 95.3575 128.822 101.199 119.097 109.421L121.742 112.55C130.981 104.739 141.914 99.1897 153.672 96.3413L152.707 92.3592Z">
                  </path>
                  <path
                    d="M253.294 161.699C255.099 175.937 253.132 190.4 247.59 203.639L243.811 202.057C249.075 189.48 250.944 175.74 249.23 162.214L253.294 161.699Z">
                  </path>
                  <path
                    d="M172 90.0557C184.677 90.0557 197.18 92.9967 208.528 98.6474C219.875 104.298 229.757 112.505 237.396 122.621L234.126 125.09C226.869 115.479 217.481 107.683 206.701 102.315C195.921 96.9469 184.043 94.1529 172 94.1529V90.0557Z">
                  </path>
                  <path
                    d="M244.195 133.235C246.991 138.442 249.216 143.937 250.83 149.623L246.888 150.742C245.355 145.34 243.242 140.12 240.586 135.174L244.195 133.235Z">
                  </path>
                  <path
                    d="M234.238 225.304C223.932 237.338 210.358 246.126 195.159 250.604C179.961 255.082 163.79 255.058 148.606 250.534L149.775 246.607C164.201 250.905 179.563 250.928 194.001 246.674C208.44 242.42 221.335 234.071 231.126 222.639L234.238 225.304Z">
                  </path>
                </mask>
                <path mask="url(#path-2-inside-2_111_3212)" fill="#00FFFF"
                  d="M102.892 127.966L105.579 123.75L101.362 121.063L98.6752 125.28L102.892 127.966ZM90.2897 178.19L85.304 178.567L85.6817 183.553L90.6674 183.175L90.2897 178.19ZM94.3752 177.88L94.7529 182.866L99.7386 182.488L99.3609 177.503L94.3752 177.88ZM106.347 130.168L110.564 132.855L113.251 128.638L109.034 125.951L106.347 130.168ZM93.3401 194.968L91.9387 190.168L87.1391 191.569L88.5405 196.369L93.3401 194.968ZM122.814 237.541L119.813 241.54L123.812 244.541L126.813 240.542L122.814 237.541ZM125.273 234.264L129.272 237.265L132.273 233.266L128.274 230.265L125.273 234.264ZM97.2731 193.819L102.073 192.418L100.671 187.618L95.8717 189.02L97.2731 193.819ZM152.707 92.3592L157.567 91.182L156.389 86.3226L151.53 87.4998L152.707 92.3592ZM119.097 109.421L115.869 105.603L112.05 108.831L115.278 112.649L119.097 109.421ZM121.742 112.55L117.924 115.778L121.152 119.596L124.97 116.368L121.742 112.55ZM153.672 96.3413L154.849 101.201L159.708 100.023L158.531 95.1641L153.672 96.3413ZM253.294 161.699L258.255 161.07L257.626 156.11L252.666 156.738L253.294 161.699ZM247.59 203.639L245.66 208.251L250.272 210.182L252.203 205.569L247.59 203.639ZM243.811 202.057L239.198 200.126L237.268 204.739L241.88 206.669L243.811 202.057ZM249.23 162.214L248.601 157.253L243.641 157.882L244.269 162.842L249.23 162.214ZM172 90.0557V85.0557H167V90.0557H172ZM208.528 98.6474L206.299 103.123L206.299 103.123L208.528 98.6474ZM237.396 122.621L240.409 126.611L244.399 123.598L241.386 119.608L237.396 122.621ZM234.126 125.09L230.136 128.103L233.149 132.093L237.139 129.08L234.126 125.09ZM206.701 102.315L204.473 106.791L204.473 106.791L206.701 102.315ZM172 94.1529H167V99.1529H172V94.1529ZM244.195 133.235L248.601 130.87L246.235 126.465L241.83 128.83L244.195 133.235ZM250.83 149.623L252.195 154.433L257.005 153.067L255.64 148.257L250.83 149.623ZM246.888 150.742L242.078 152.107L243.444 156.917L248.254 155.552L246.888 150.742ZM240.586 135.174L238.22 130.768L233.815 133.134L236.181 137.539L240.586 135.174ZM234.238 225.304L238.036 228.556L241.288 224.759L237.491 221.506L234.238 225.304ZM195.159 250.604L196.572 255.4L196.572 255.4L195.159 250.604ZM148.606 250.534L143.814 249.107L142.386 253.899L147.178 255.326L148.606 250.534ZM149.775 246.607L151.203 241.816L146.411 240.388L144.983 245.18L149.775 246.607ZM194.001 246.674L195.415 251.47L195.415 251.47L194.001 246.674ZM231.126 222.639L234.379 218.841L230.581 215.589L227.329 219.386L231.126 222.639ZM98.6752 125.28C88.5757 141.13 83.8844 159.826 85.304 178.567L95.2754 177.812C94.0191 161.227 98.1709 144.681 107.109 130.653L98.6752 125.28ZM90.6674 183.175L94.7529 182.866L93.9976 172.895L89.912 173.204L90.6674 183.175ZM99.3609 177.503C98.1715 161.8 102.102 146.135 110.564 132.855L102.131 127.481C92.5071 142.585 88.0368 160.4 89.3895 178.258L99.3609 177.503ZM109.034 125.951L105.579 123.75L100.205 132.183L103.661 134.385L109.034 125.951ZM88.5405 196.369C93.8083 214.41 104.78 230.259 119.813 241.54L125.815 233.542C112.512 223.558 102.802 209.532 98.1397 193.566L88.5405 196.369ZM126.813 240.542L129.272 237.265L121.274 231.263L118.815 234.54L126.813 240.542ZM128.274 230.265C115.679 220.813 106.486 207.534 102.073 192.418L92.4735 195.221C97.493 212.412 107.948 227.513 122.272 238.263L128.274 230.265ZM95.8717 189.02L91.9387 190.168L94.7415 199.767L98.6745 198.619L95.8717 189.02ZM151.53 87.4998C138.398 90.681 126.188 96.8793 115.869 105.603L122.325 113.239C131.457 105.519 142.262 100.034 153.884 97.2187L151.53 87.4998ZM115.278 112.649L117.924 115.778L125.56 109.322L122.915 106.193L115.278 112.649ZM124.97 116.368C133.616 109.059 143.846 103.866 154.849 101.201L152.495 91.4818C139.981 94.5132 128.347 100.419 118.514 108.732L124.97 116.368ZM158.531 95.1641L157.567 91.182L147.848 93.5364L148.812 97.5185L158.531 95.1641ZM248.334 162.327C250.028 175.697 248.181 189.277 242.978 201.708L252.203 205.569C258.082 191.522 260.169 176.177 258.255 161.07L248.334 162.327ZM249.521 199.027L245.741 197.445L241.88 206.669L245.66 208.251L249.521 199.027ZM248.423 203.987C254.025 190.602 256.014 175.98 254.19 161.585L244.269 162.842C245.873 175.5 244.125 188.357 239.198 200.126L248.423 203.987ZM249.858 167.174L253.923 166.659L252.666 156.738L248.601 157.253L249.858 167.174ZM172 95.0557C183.903 95.0557 195.644 97.8172 206.299 103.123L210.757 94.1717C198.717 88.1761 185.45 85.0557 172 85.0557V95.0557ZM206.299 103.123C216.954 108.429 226.233 116.135 233.406 125.634L241.386 119.608C233.281 108.874 222.796 100.167 210.757 94.1717L206.299 103.123ZM234.383 118.631L231.113 121.1L237.139 129.08L240.409 126.611L234.383 118.631ZM238.116 122.077C230.393 111.849 220.403 103.552 208.93 97.8393L204.473 106.791C214.56 111.814 223.345 119.11 230.136 128.103L238.116 122.077ZM208.93 97.8393C197.458 92.1263 184.816 89.1529 172 89.1529V99.1529C183.269 99.1529 194.385 101.767 204.473 106.791L208.93 97.8393ZM177 94.1529V90.0557H167V94.1529H177ZM239.79 135.601C242.416 140.49 244.504 145.649 246.02 150.988L255.64 148.257C253.927 142.225 251.567 136.395 248.601 130.87L239.79 135.601ZM249.464 144.813L245.523 145.932L248.254 155.552L252.195 154.433L249.464 144.813ZM251.698 149.376C250.067 143.628 247.818 138.073 244.991 132.808L236.181 137.539C238.666 142.168 240.644 147.052 242.078 152.107L251.698 149.376ZM242.951 139.579L246.561 137.64L241.83 128.83L238.22 130.768L242.951 139.579ZM230.441 222.051C220.763 233.351 208.017 241.603 193.746 245.808L196.572 255.4C212.698 250.649 227.101 241.325 238.036 228.556L230.441 222.051ZM193.746 245.808C179.475 250.012 164.291 249.99 150.033 245.742L147.178 255.326C163.289 260.125 180.447 260.151 196.572 255.4L193.746 245.808ZM153.397 251.962L154.567 248.035L144.983 245.18L143.814 249.107L153.397 251.962ZM148.348 251.399C163.7 255.973 180.049 255.997 195.415 251.47L192.588 241.877C179.077 245.858 164.702 245.837 151.203 241.816L148.348 251.399ZM195.415 251.47C210.78 246.942 224.504 238.058 234.924 225.891L227.329 219.386C218.167 230.084 206.099 237.897 192.588 241.877L195.415 251.47ZM227.874 226.436L230.986 229.101L237.491 221.506L234.379 218.841L227.874 226.436Z">
                </path>
              </g>
            </svg>

            <svg style="--i:0;--j:2;">
              <g id="inner3">
                <path
                  d="M195.136 135.689C188.115 131.215 179.948 128.873 171.624 128.946C163.299 129.019 155.174 131.503 148.232 136.099L148.42 136.382C155.307 131.823 163.368 129.358 171.627 129.286C179.886 129.213 187.988 131.537 194.954 135.975L195.136 135.689Z">
                </path>
                <path
                  d="M195.136 208.311C188.115 212.784 179.948 215.127 171.624 215.054C163.299 214.981 155.174 212.496 148.232 207.901L148.42 207.618C155.307 212.177 163.368 214.642 171.627 214.714C179.886 214.786 187.988 212.463 194.954 208.025L195.136 208.311Z">
                </path>
                <path mask="url(#path-5-inside-3_111_3212)" fill="#00FFFF"
                  d="M195.136 135.689L195.474 135.904L195.689 135.566L195.351 135.352L195.136 135.689ZM171.624 128.946L171.627 129.346L171.624 128.946ZM148.232 136.099L148.011 135.765L147.678 135.986L147.899 136.32L148.232 136.099ZM148.42 136.382L148.086 136.603L148.307 136.936L148.641 136.716L148.42 136.382ZM171.627 129.286L171.63 129.686L171.627 129.286ZM194.954 135.975L194.739 136.313L195.076 136.528L195.291 136.19L194.954 135.975ZM195.136 208.311L195.351 208.648L195.689 208.433L195.474 208.096L195.136 208.311ZM171.624 215.054L171.627 214.654L171.624 215.054ZM148.232 207.901L147.899 207.68L147.678 208.014L148.011 208.234L148.232 207.901ZM148.42 207.618L148.641 207.284L148.307 207.063L148.086 207.397L148.42 207.618ZM171.627 214.714L171.63 214.314L171.627 214.714ZM194.954 208.025L195.291 207.81L195.076 207.472L194.739 207.687L194.954 208.025ZM195.351 135.352C188.265 130.836 180.022 128.473 171.62 128.546L171.627 129.346C179.874 129.274 187.966 131.594 194.921 136.026L195.351 135.352ZM171.62 128.546C163.218 128.619 155.018 131.127 148.011 135.765L148.453 136.432C155.33 131.88 163.38 129.418 171.627 129.346L171.62 128.546ZM147.899 136.32L148.086 136.603L148.753 136.161L148.566 135.878L147.899 136.32ZM148.641 136.716C155.463 132.199 163.448 129.757 171.63 129.686L171.623 128.886C163.287 128.958 155.15 131.447 148.199 136.049L148.641 136.716ZM171.63 129.686C179.812 129.614 187.839 131.916 194.739 136.313L195.169 135.638C188.138 131.158 179.959 128.813 171.623 128.886L171.63 129.686ZM195.291 136.19L195.474 135.904L194.799 135.474L194.617 135.76L195.291 136.19ZM194.921 207.974C187.966 212.406 179.874 214.726 171.627 214.654L171.62 215.454C180.022 215.527 188.265 213.163 195.351 208.648L194.921 207.974ZM171.627 214.654C163.38 214.582 155.33 212.12 148.453 207.567L148.011 208.234C155.018 212.873 163.218 215.38 171.62 215.454L171.627 214.654ZM148.566 208.122L148.753 207.838L148.086 207.397L147.899 207.68L148.566 208.122ZM148.199 207.951C155.15 212.553 163.287 215.041 171.623 215.114L171.63 214.314C163.448 214.243 155.463 211.801 148.641 207.284L148.199 207.951ZM171.623 215.114C179.959 215.187 188.138 212.842 195.169 208.362L194.739 207.687C187.839 212.084 179.812 214.386 171.63 214.314L171.623 215.114ZM194.617 208.239L194.799 208.526L195.474 208.096L195.291 207.81L194.617 208.239Z">
                </path>
              </g>
              <path stroke="#00FFFF"
                d="M240.944 172C240.944 187.951 235.414 203.408 225.295 215.738C215.176 228.068 201.095 236.508 185.45 239.62C169.806 242.732 153.567 240.323 139.5 232.804C125.433 225.285 114.408 213.12 108.304 198.384C102.2 183.648 101.394 167.25 106.024 151.987C110.654 136.723 120.434 123.537 133.696 114.675C146.959 105.813 162.884 101.824 178.758 103.388C194.632 104.951 209.472 111.97 220.751 123.249"
                id="out3"></path>
            </svg>

            <svg style="--i:1;--j:3;">
              <g id="inner1">
                <path fill="#00FFFF"
                  d="M145.949 124.51L148.554 129.259C156.575 124.859 165.672 122.804 174.806 123.331C183.94 123.858 192.741 126.944 200.203 132.236C207.665 137.529 213.488 144.815 217.004 153.261C220.521 161.707 221.59 170.972 220.09 179.997L224.108 180.665L224.102 180.699L229.537 181.607C230.521 175.715 230.594 169.708 229.753 163.795L225.628 164.381C224.987 159.867 223.775 155.429 222.005 151.179C218.097 141.795 211.628 133.699 203.337 127.818C195.045 121.937 185.266 118.508 175.118 117.923C165.302 117.357 155.525 119.474 146.83 124.037C146.535 124.192 146.241 124.349 145.949 124.51ZM224.638 164.522C224.009 160.091 222.819 155.735 221.082 151.563C217.246 142.352 210.897 134.406 202.758 128.634C194.62 122.862 185.021 119.496 175.06 118.922C165.432 118.367 155.841 120.441 147.311 124.914L148.954 127.91C156.922 123.745 165.876 121.814 174.864 122.333C184.185 122.87 193.166 126.019 200.782 131.421C208.397 136.822 214.339 144.257 217.928 152.877C221.388 161.188 222.526 170.276 221.23 179.173L224.262 179.677C224.998 174.671 225.35 169.535 224.638 164.522Z"
                  clip-rule="evenodd" fill-rule="evenodd"></path>
                <path fill="#00FFFF"
                  d="M139.91 220.713C134.922 217.428 130.469 213.395 126.705 208.758L130.983 205.286L130.985 205.288L134.148 202.721C141.342 211.584 151.417 217.642 162.619 219.839C173.821 222.036 185.438 220.232 195.446 214.742L198.051 219.491C197.759 219.651 197.465 219.809 197.17 219.963C186.252 225.693 173.696 227.531 161.577 225.154C154.613 223.789 148.041 221.08 142.202 217.234L139.91 220.713ZM142.752 216.399C148.483 220.174 154.934 222.833 161.769 224.173C173.658 226.504 185.977 224.704 196.689 219.087L195.046 216.09C185.035 221.323 173.531 222.998 162.427 220.82C151.323 218.643 141.303 212.747 134.01 204.122L131.182 206.5C134.451 210.376 138.515 213.607 142.752 216.399Z"
                  clip-rule="evenodd" fill-rule="evenodd"></path>
              </g>
            </svg>

            <svg style="--i:2;--j:4;">
              <path fill="#00FFFF"
                d="M180.956 186.056C183.849 184.212 186.103 181.521 187.41 178.349C188.717 175.177 189.013 171.679 188.258 168.332C187.503 164.986 185.734 161.954 183.192 159.65C180.649 157.346 177.458 155.883 174.054 155.46C170.649 155.038 167.197 155.676 164.169 157.288C161.14 158.9 158.683 161.407 157.133 164.468C155.582 167.528 155.014 170.992 155.505 174.388C155.997 177.783 157.524 180.944 159.879 183.439L161.129 182.259C159.018 180.021 157.648 177.186 157.207 174.141C156.766 171.096 157.276 167.989 158.667 165.245C160.057 162.5 162.261 160.252 164.977 158.806C167.693 157.36 170.788 156.788 173.842 157.167C176.895 157.546 179.757 158.858 182.037 160.924C184.317 162.99 185.904 165.709 186.581 168.711C187.258 171.712 186.992 174.849 185.82 177.694C184.648 180.539 182.627 182.952 180.032 184.606L180.956 186.056Z"
                id="center1"></path>
              <path fill="#00FFFF"
                d="M172 166.445C175.068 166.445 177.556 168.932 177.556 172C177.556 175.068 175.068 177.556 172 177.556C168.932 177.556 166.444 175.068 166.444 172C166.444 168.932 168.932 166.445 172 166.445ZM172 177.021C174.773 177.021 177.021 174.773 177.021 172C177.021 169.227 174.773 166.979 172 166.979C169.227 166.979 166.979 169.227 166.979 172C166.979 174.773 169.227 177.021 172 177.021Z"
                id="center"></path>
            </svg>
          </div>
        </div>
        <!-- 旋转饼图 -->
        <div class="cenTitleTop1">
          <div class="loader">
            <div class="blue">
            </div>
          </div>
        </div>
        <div></div>
        <span id="cenTitleText">
          <span class="cenTitleTextLeft">
            <img class="cenTitleTextLeft_img" src="./images/threeUser.png" alt="">
            <p class="cenTitleTextLeft_p">用户总数(个)</p>
          </span>
          <span class="cenTitleTextContent">
          </span>

          <span class="cenTitleTextRight">
            <span class="cenTitleTextRight_text">1.22%</span>
            <img class="cenTitleTextRight_img" src="./images/greenTop.png" alt="">
          </span>
        </span>

        <div></div>

      </div>
      <!-- 流光 -->
      <div class="light-line right-top">
        <div class="line-block gradient"></div>
      </div>
      <!-- 在线 离线  -->
      <ul class="deviceUl">
        <li class="deviceLi">
          <!-- 定义id或者class，就可以通过 $(id或者class).html(值) 模式， 赋值 例子：$('.fullCabinetTotalNum').html(fullCabinetTotal)-->
          <div>充电柜数量(台)</div>
          <div class="deviceLi_twoDiv">
            <span class="deviceLi_twoDiv_oneSpan">在线 <span class="deviceLi_twoDiv_oneSpan1">2</span></span>
            <span class="deviceLi_twoDiv_twoSpan">离线<span class="deviceLi_twoDiv_twoSpan1">2</span></span>
          </div>

        </li>
        <li class="deviceLi1"></li>
        <li class="deviceLi">
          <!-- 通过 fullCabinetTotalNum 赋值 -->
          <div>充电桩数量(台)</div>
          <div class="deviceLi_twoDiv">
            <span class="deviceLi_twoDiv_oneSpan">在线 <span class="deviceLi_twoDiv_oneSpan1">25</span></span>
            <span class="deviceLi_twoDiv_twoSpan">离线<span class="deviceLi_twoDiv_twoSpan1">5</span></span>
          </div>

        </li>
        <li class="deviceLi1"></li>
        <li class="deviceLi">
          <div>换电柜数量(台)</div>
          <div class="deviceLi_twoDiv">
            <span class="deviceLi_twoDiv_oneSpan">在线 <span class="deviceLi_twoDiv_oneSpan1">0</span></span>
            <span class="deviceLi_twoDiv_twoSpan">离线<span class="deviceLi_twoDiv_twoSpan1">1</span></span>
          </div>
        </li>
      </ul>

      <!-- 第二层 街道分布图 -->
      <div id="secondBox">
        <div id="indexMap" style="width: 100%; height: 32.33rem;position: relative;">
          <button id="btn">返回</button>
          <button id="PositionBtn">获取当前位置</button>
          <select id="mySelect" style="display: none;"></select>
        </div>

      </div>
    </div>

    <!-- 右边 -->
    <div class="cloumn" style="position: relative">
      <!-- 时间显示  从public/js/date.js文件拿showtime函数，在showtime函数定于id为time，这边使用定义一下id为time就可以-->
      <div id="time" style="
            position: absolute;
            right: 3.02rem;
            top: -1.82rem;
            font-size: 1rem;
          "></div>
      <!--右边第一盒子 报警信息 -->

      <div class="alarmInfo borderimage">
        <!-- <div class="title">报警信息</div> -->
        <div class="leftTopTitle">
          <div class=" title">报警信息</div>
          <ul class="wrapper leftTopTitle_twoDiv">
            <li class="icon facebook">
              <span class="tooltip">今天</span>
              <span><i class="fab fa-facebook-f">今天</i></span>
            </li>
            <li class="icon twitter">
              <span class="tooltip">近7天</span>
              <span><i class="fab fa-twitter">近7天</i></span>
            </li>
            <li class="icon instagram">
              <span class="tooltip">近30天</span>
              <span><i class="fab fa-instagram">近30天</i></span>
            </li>
          </ul>
        </div>
        <ul class="list">
        </ul>
      </div>

      <!-- 右边第二盒子 视频监控、充电占比  -->
      <div class="rSecondBox borderimage">
        <div id="monitoringCount" style="display: none">
          <div class="title">监控设备数量</div>
          <div class="content">
            <div>在线<span class="onlineCount">1</span></div>
            <div>离线<span class="nolineCount">0</span></div>
          </div>
        </div>
        <!-- 视屏监控 -->
        <div id="monitoring" class="" style="display: none;">
          <div class="title">视频监控</div>
          <div class="content" style="position: relative;display: flex; flex-wrap: wrap;">
            <!-- 监控视频 // 19.83rem 12.92rem -->
            <div id="playWind" style="max-width: 19.83rem; max-height:12.92rem;"></div>
          </div>
        </div>

        <!-- 充电占比 ----  在chargeRatio.js文件引入，通过.rechargeAnswer #answerPicture引入，也可以参考rechargeAnswer.js文件 -->
        <div id="rechargeAnswer" class="rechargeAnswer">
          <div class="leftTopTitle">
            <div class=" title">充电占比</div>
            <ul class="wrapper leftTopTitle_twoDiv">
              <li class="icon facebook">
                <span class="tooltip">今天</span>
                <span><i class="fab fa-facebook-f">今天</i></span>
              </li>
              <li class="icon twitter">
                <span class="tooltip">近7天</span>
                <span><i class="fab fa-twitter">近7天</i></span>
              </li>
              <li class="icon instagram">
                <span class="tooltip">近30天</span>
                <span><i class="fab fa-instagram">近30天</i></span>
              </li>
            </ul>
          </div>
          <div class="content">
            <div id="answerPicture"></div>
            <!-- 横向柱图 -->
            <div class="answerBox">
              <div class="pile" style="width: 0%" id="pileBgc">
                <div></div>
                <span></span>
              </div>
              <div class="tank" style="width: 0%" id="tankBgc">
                <div></div>
                <span></span>
              </div>
              <div class="electric" style="width: 0%" id="electricBgc">
                <div></div>
                <span></span>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边第三盒子 预警统计  ----  在preWarningSystem.js文件引入，通过.preWarningSystem #answerPicturess引入 -->
        <div id="preWarningSystem" class="preWarningSystem">

          <div class="leftTopTitle">
            <div class=" title">预警统计</div>
            <ul class="wrapper leftTopTitle_twoDiv">
              <li class="icon facebook">
                <span class="tooltip">今天</span>
                <span><i class="fab fa-facebook-f">今天</i></span>
              </li>
              <li class="icon twitter">
                <span class="tooltip">近7天</span>
                <span><i class="fab fa-twitter">近7天</i></span>
              </li>
              <li class="icon instagram">
                <span class="tooltip">近30天</span>
                <span><i class="fab fa-instagram">近30天</i></span>
              </li>
            </ul>
          </div>
          <div class="content">
            <div id="answerPicturess"></div>
            <div style="position: relative;top: -0.83rem;left: 1.04rem;font-size: .5rem;transform: scale(0.85);">
              <p>钟村镇人民路12号，充电柜发生烟感报警</p>
              <p>沙头街道沙头一街10号，换电柜发生烟感报警</p>
            </div>
          </div>
        </div>
      </div>

      <!--  -->
    </div>
  </div>
</body>

<script type="text/javascript">
  // 时间戳
  // 获取当前时间戳，单位为毫秒
  const currentTimeStamp = new Date().getTime();

  // 将时间戳转换为Date对象
  const currentDate = new Date(currentTimeStamp);

  // 获取当前日期的月份和日期
  const currentMonth = currentDate.getMonth() + 1; // 月份从0开始，需要加1
  const currentDay = currentDate.getDate();

  // 格式化当前日期的月份和日期
  const currentMonthStr = currentMonth < 10 ? `0${currentMonth}` : `${currentMonth}`;
  const currentDayStr = currentDay < 10 ? `0${currentDay}` : `${currentDay}`;

  // 拼接格式化后的当前日期字符串
  const currentFormattedDate = `${currentMonthStr}-${currentDayStr}`;// 输出当前日期格式化后的字符串，例如：03-27

  // 计算一周前的时间戳，单位为毫秒
  const oneWeekAgoTimeStamp = currentTimeStamp - 1 * 24 * 60 * 60 * 1000;
  const twoWeekAgoTimeStamp = currentTimeStamp - 2 * 24 * 60 * 60 * 1000;
  const threeWeekAgoTimeStamp = currentTimeStamp - 3 * 24 * 60 * 60 * 1000;
  const fourWeekAgoTimeStamp = currentTimeStamp - 4 * 24 * 60 * 60 * 1000;
  const fiveWeekAgoTimeStamp = currentTimeStamp - 5 * 24 * 60 * 60 * 1000;
  const sixWeekAgoTimeStamp = currentTimeStamp - 6 * 24 * 60 * 60 * 1000;

  // 将一周前的时间戳转换为Date对象
  const oneWeekAgoDate = new Date(oneWeekAgoTimeStamp);
  const twoWeekAgoDate = new Date(twoWeekAgoTimeStamp);
  const threeWeekAgoDate = new Date(threeWeekAgoTimeStamp);
  const fourWeekAgoDate = new Date(fourWeekAgoTimeStamp);
  const fiveWeekAgoDate = new Date(fiveWeekAgoTimeStamp);
  const sixWeekAgoDate = new Date(sixWeekAgoTimeStamp);

  // 获取一周前的日期的月份和日期
  const oneWeekAgoMonth = oneWeekAgoDate.getMonth() + 1; // 月份从0开始，需要加1
  const oneWeekAgoDay = oneWeekAgoDate.getDate();
  const twoWeekAgoMonth = twoWeekAgoDate.getMonth() + 1; // 月份从0开始，需要加1
  const twoWeekAgoDay = twoWeekAgoDate.getDate();
  const threeWeekAgoMonth = threeWeekAgoDate.getMonth() + 1; // 月份从0开始，需要加1
  const threeWeekAgoDay = threeWeekAgoDate.getDate();
  const fourWeekAgoMonth = fourWeekAgoDate.getMonth() + 1; // 月份从0开始，需要加1
  const fourWeekAgoDay = fourWeekAgoDate.getDate();
  const fiveWeekAgoMonth = fiveWeekAgoDate.getMonth() + 1; // 月份从0开始，需要加1
  const fiveWeekAgoDay = fiveWeekAgoDate.getDate();
  const sixWeekAgoMonth = sixWeekAgoDate.getMonth() + 1; // 月份从0开始，需要加1
  const sixWeekAgoDay = sixWeekAgoDate.getDate();


  // 格式化一周前的日期的月份和日期
  const oneWeekAgoMonthStr = oneWeekAgoMonth < 10 ? `0${oneWeekAgoMonth}` : `${oneWeekAgoMonth}`;
  const oneWeekAgoDayStr = oneWeekAgoDay < 10 ? `0${oneWeekAgoDay}` : `${oneWeekAgoDay}`;
  const twoWeekAgoMonthStr = twoWeekAgoMonth < 10 ? `0${twoWeekAgoMonth}` : `${twoWeekAgoMonth}`;
  const twoWeekAgoDayStr = twoWeekAgoDay < 10 ? `0${twoWeekAgoDay}` : `${twoWeekAgoDay}`;

  const threeWeekAgoMonthStr = threeWeekAgoMonth < 10 ? `0${threeWeekAgoMonth}` : `${threeWeekAgoMonth}`;
  const threeWeekAgoDayStr = threeWeekAgoDay < 10 ? `0${threeWeekAgoDay}` : `${threeWeekAgoDay}`;
  const fourWeekAgoMonthStr = fourWeekAgoMonth < 10 ? `0${fourWeekAgoMonth}` : `${fourWeekAgoMonth}`;
  const fourWeekAgoDayStr = fourWeekAgoDay < 10 ? `0${fourWeekAgoDay}` : `${fourWeekAgoDay}`;
  const fiveWeekAgoMonthStr = fiveWeekAgoMonth < 10 ? `0${fiveWeekAgoMonth}` : `${fiveWeekAgoMonth}`;
  const fiveWeekAgoDayStr = fiveWeekAgoDay < 10 ? `0${fiveWeekAgoDay}` : `${fiveWeekAgoDay}`;
  const sixWeekAgoMonthStr = sixWeekAgoMonth < 10 ? `0${sixWeekAgoMonth}` : `${sixWeekAgoMonth}`;
  const sixWeekAgoDayStr = sixWeekAgoDay < 10 ? `0${sixWeekAgoDay}` : `${sixWeekAgoDay}`;

  // 拼接格式化后的一周前的日期字符串
  const oneWeekAgoFormattedDate = `${oneWeekAgoMonthStr}-${oneWeekAgoDayStr}`; // 输出1天前日期格式化后的字符串，例如：03-26
  const twoWeekAgoFormattedDate = `${twoWeekAgoMonthStr}-${twoWeekAgoDayStr}`;// 输出2天前日期格式化后的字符串，例如：03-25
  const threeWeekAgoFormattedDate = `${threeWeekAgoMonthStr}-${threeWeekAgoDayStr}`;// 输出3天前日期格式化后的字符串，例如：03-24
  const fourWeekAgoFormattedDate = `${fourWeekAgoMonthStr}-${fourWeekAgoDayStr}`;// 输出天4前日期格式化后的字符串，例如：03-23
  const fiveWeekAgoFormattedDate = `${fiveWeekAgoMonthStr}-${fiveWeekAgoDayStr}`;// 输出5天前日期格式化后的字符串，例如：03-22
  const sixWeekAgoFormattedDate = `${sixWeekAgoMonthStr}-${sixWeekAgoDayStr}`;// 输出6天前日期格式化后的字符串，例如：03-21



  // 折线图
  // 折线图 ----- 第一个 --- 充电柜
  var dom = document.getElementById('container');
  var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  })
  //这里插入示例的组件

  let xLabel = [sixWeekAgoFormattedDate, fiveWeekAgoFormattedDate, fourWeekAgoFormattedDate, threeWeekAgoFormattedDate, twoWeekAgoFormattedDate, oneWeekAgoFormattedDate, currentFormattedDate]
  let res1 = [280, 294, 310, 305, 315, 306, 321];
  let res2 = [401, 411, 430, 420, 452, 437, 446];
  let res3 = [133, 125, 135, 142, 121, 160, 172];
  option = {
    backgroundColor: '#0e1c47',
    // 提示框
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: 'transparent',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(126,199,255,0)' // 0% 处的颜色
            }, {
              offset: 0.5,
              color: 'rgba(126,199,255,1)' // 100% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(126,199,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
      },
      formatter: (p) => {
        let dom = `<div >
    
        <div style="padding: 4px 8px 4px 14px;display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;position: relative;z-index: 1;">
            <div style="margin-bottom: 4px;width:100%;display:${p[0] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:rgba(25,163,223,1);">
                <span style="font-size:14px;color:rgba(25,163,223,1);">${p[0] ? p[0].seriesName : ''}</span>：
                <span style="font-size:14px;color:rgba(25,163,223,1);;">${p[0] ? p[0].data : ''}</span>
            </div>
        </div>
    </div>`
        return dom
      }
      //   formatter: (p) => {
      //     let dom = `<div >

      //     <div style="padding: 4px 8px 4px 14px;display: flex;
      //     justify-content: center;
      //     align-items: center;
      //     flex-direction: column;position: relative;z-index: 1;">
      //         <div style="margin-bottom: 4px;width:100%;display:${p[0] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:rgba(25,163,223,1);">
      //             <span style="font-size:14px;color:rgba(25,163,223,1);">${p[0] ? p[0].seriesName : ''}</span>：
      //             <span style="font-size:14px;color:rgba(25,163,223,1);;">${p[0] ? p[0].data : ''}</span>
      //         </div>
      //         <div style="width:100%;height:100%;display:${p[1] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:rgb(255,128,0);padding-left:4px;">
      //             <span style="font-size:14px;color:rgb(255,128,0);">${p[1] ? p[1].seriesName : ''}</span>：
      //             <span style="font-size:14px;color:rgb(255,128,0);">${p[1] ? p[1].data : ''}</span>
      //         </div>
      //         <div style="width:100%;height:100%;display:${p[2] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:#0feb7c;padding-left:4px;">
      //             <span style="font-size:14px;color:#0feb7c;">${p[2] ? p[2].seriesName : ''}</span>：
      //             <span style="font-size:14px;color:#0feb7c;">${p[2] ? p[2].data : ''}</span>
      //         </div>
      //     </div>
      // </div>`
      //     return dom
      //   }
    },
    // 图例组件
    legend: {
      align: "auto",
      left: '5%',
      right: '5%',
      top: '2%',
      type: 'plain',
      textStyle: {
        color: '#ffffff',
        fontSize: 10
      },
      // icon: 'rect',
      image: './images/videoTop.png',
      itemGap: 25,
      itemWidth: 18,

      data: [
        {
          name: '充电订单',
          // 强制设置图形为圆。
          icon: 'circle',
          // 设置文本颜色
          textStyle: {
            color: 'rgba(25,163,223,1)'
          }
        },
        // {
        //   name: '充电次数',
        //   icon: 'diamond',
        //   textStyle: {
        //     color: 'rgb(255,128,0)'
        //   }
        // },
        // {
        //   name: '新增用户',
        //   icon: 'rect',
        //   textStyle: {
        //     color: '#0feb7c'
        //   }
        // }
      ]
    },
    // 直角坐标系内绘图网格
    grid: {
      top: '18%',
      left: '12%',
      right: '5%',
      bottom: '23%',
      // containLabel: true
    },
    //  直角坐标系 grid 中的 x 轴
    xAxis: [{
      type: 'category',
      // name: '充电柜数据',
      nameLocation: 'start',
      boundaryGap: ['20%', '20%'],

      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "#rgb(77,83,141)",
          width: 4,

        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置

        textStyle: {
          color: '#7ec7ff',
          padding: 6,
          fontSize: 8
        },
        formatter: function (data) {
          return data
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#192a44',

        },
      },
      axisTick: {
        show: false,
      },
      data: xLabel
    }],
    yAxis: [{
      nameTextStyle: {
        color: "#7ec7ff",
        fontSize: 8,
        padding: 6
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#192a44'
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#rgb(77,83,141)",
          width: 4
        }

      },
      axisLabel: {
        show: true,
        margin: 1,
        textStyle: {
          color: '#7ec7ff',
          padding: 8
        },
        formatter: function (value) {
          var texts = [];
          if (value == 100) {
            texts.push('100');
          }
          else if (value == 200) {
            texts.push('200');
          }
          else if (value == 300) {
            texts.push('300');
          }
          else if (value == 400) {
            texts.push('400');
          }
          else if (value == 500) {
            texts.push('500');
          }
          else if (value == 0) {
            texts.push('0');
          }
          return texts;
        }
      },
      axisTick: {
        show: false,
      },
    }],

    // 连续折线
    series: [{
      name: '充电订单',
      type: 'line',
      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 0,
      lineStyle: {
        normal: {
          width: 2,
          color: "rgba(25,163,223,1)", // 线条颜色
        },
      },
      itemStyle: {
        color: "rgba(25,163,223,1)",

      },
      tooltip: {
        show: true
      },

      data: res1
    },
      // {
      //   name: '充电次数',
      //   type: 'line',
      //   symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      //   showAllSymbol: true,
      //   symbolSize: 0,
      //   lineStyle: {
      //     normal: {
      //       width: 2,
      //       color: "rgb(255,128,0)", // 线条颜色
      //     },
      //   },
      //   itemStyle: {
      //     color: "rgb(255,128,0)",

      //   },
      //   tooltip: {
      //     show: true
      //   },

      //   data: res2
      // }, {
      //   name: '新增用户',
      //   type: 'line',
      //   symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      //   showAllSymbol: true,
      //   symbolSize: 0,
      //   lineStyle: {
      //     normal: {
      //       width: 2,
      //       color: "#0feb7c", // 线条颜色
      //     },
      //   },
      //   itemStyle: {
      //     color: "#0feb7c",

      //   },
      //   tooltip: {
      //     show: true
      //   },

      //   data: res3
      // },
    ]
  };
  let len = 0
  setInterval(() => {
    if (len === xLabel.length) {
      len = 0
    }
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: len,
    })
    len++
  }, 1000)
  myChart.setOption(option)


  // 折线图 ----- 第二个 --- 充电桩
  var dom1 = document.getElementById('container1');
  var myChart = echarts.init(dom1, null, {
    renderer: 'canvas',
    useDirtyRect: false
  })
  //这里插入示例的组件
  let xLabel1 = [sixWeekAgoFormattedDate, fiveWeekAgoFormattedDate, fourWeekAgoFormattedDate, threeWeekAgoFormattedDate, twoWeekAgoFormattedDate, oneWeekAgoFormattedDate, currentFormattedDate]

  let result = [
    { name: sixWeekAgoFormattedDate, ai: 225, },
    { name: fiveWeekAgoFormattedDate, ai: 350, },
    { name: fourWeekAgoFormattedDate, ai: 229, },
    { name: threeWeekAgoFormattedDate, ai: 426, },
    { name: twoWeekAgoFormattedDate, ai: 330, },
    { name: oneWeekAgoFormattedDate, ai: 370, },
    { name: currentFormattedDate, ai: 475, },
  ]

  let xData = result.map((item) => {
    return item.name
  })
  let keys = ['ai',],
    seriesData = []
  let color = ['0, 124, 250', '0, 254, 210',]
  keys.forEach((key, index) => {

    seriesData.push({
      name: '充电订单',
      data: result.map((item) => {
        return item[key]
      }),
      type: 'line',
      yAxisIndex: 0,
      symbol: 'none',
      symbolSize: 7,
      barWidth: 14,
      splitNumber: 6,
      smooth: false,
      itemStyle: {
        color: `rgba(${color[index]},1)`
      },
      lineStyle: {
        color: `rgba(${color[index]},1)`,
        width: 1
      },
      areaStyle: {
        opacity: 1,
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            {
              offset: 0,
              color: `rgba(${color[index]},0.35)`
            },
            {
              offset: 0.8,
              color: 'rgba(6, 8, 41,.1)'
            }
          ]
        },
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
      }
    })
    seriesData.push({
      name: '充电订单',
      data: [
        {
          coords: result.map((item) => {

            return [item.name, item[key]]
          })
        }
      ],
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      zlevel: 1,
      polyline: true,
      smooth: true,
      symbol: 'circle',
      effect: {
        show: true,
        trailLength: 0.4,
        symbol: 'circle',
        period: 8,
        symbolSize: 4
      },
      lineStyle: {
        normal: {
          color: `rgba(${color[index]},1)`,
          width: 0,
          opacity: 0,
          curveness: 0
        }
      }
    })
  })

  option1 = {


    backgroundColor: 'black',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      backgroundColor: 'rgba(12, 51, 115,0.8)',
      borderColor: 'rgba(3, 11, 44, 0.5)',
      textStyle: {
        color: 'rgba(255, 255, 255, 1)'
      }
    },
    grid: {
      x: 30,
      y: 10,
      x2: 30,
      y2: 20
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisPointer: {
        handle: {
          show: false
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#AEC6DF'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 8,
        interval: 'auto'
      }
    },
    yAxis: [

      {

        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          fontSize: 8,
          color: '#7ec7ff',
          interval: 'auto'
        }
      }
    ],
    series: seriesData
  }

  myChart.setOption(option1)


  // 折线图 ----- 第三个 --- 换电柜
  var dom2 = document.getElementById('container2');
  var myChart = echarts.init(dom2, null, {
    renderer: 'canvas',
    useDirtyRect: false
  })
  //这里插入示例的组件
  let xLabel2 = [sixWeekAgoFormattedDate, fiveWeekAgoFormattedDate, fourWeekAgoFormattedDate, threeWeekAgoFormattedDate, twoWeekAgoFormattedDate, oneWeekAgoFormattedDate, currentFormattedDate]
  let res12 = [280, 294, 310, 305, 315, 306, 321];
  let res22 = [401, 411, 430, 420, 452, 437, 446];
  let res32 = [133, 125, 135, 142, 121, 160, 172];
  option2 = {
    backgroundColor: '#0e1c47',
    // 提示框
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'transparent',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(126,199,255,0)' // 0% 处的颜色
            }, {
              offset: 0.5,
              color: 'rgba(126,199,255,1)' // 100% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(126,199,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
      },
      formatter: (p) => {
        let dom2 = `<div >
    
        <div style="padding: 4px 8px 4px 14px;display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;position: relative;z-index: 1;">
            <div style="margin-bottom: 4px;width:100%;display:${p[0] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:rgba(25,163,223,1);">
                <span style="font-size:14px;color:rgba(25,163,223,1);">${p[0] ? p[0].seriesName : ''}</span>：
                <span style="font-size:14px;color:rgba(25,163,223,1);;">${p[0] ? p[0].data : ''}</span>
            </div>
        </div>
    </div>`
        return dom2
      }
      //   formatter: (p) => {
      //     let dom = `<div >

      //     <div style="padding: 4px 8px 4px 14px;display: flex;
      //     justify-content: center;
      //     align-items: center;
      //     flex-direction: column;position: relative;z-index: 1;">
      //         <div style="margin-bottom: 4px;width:100%;display:${p[0] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:rgba(25,163,223,1);">
      //             <span style="font-size:14px;color:rgba(25,163,223,1);">${p[0] ? p[0].seriesName : ''}</span>：
      //             <span style="font-size:14px;color:rgba(25,163,223,1);;">${p[0] ? p[0].data : ''}</span>
      //         </div>
      //         <div style="width:100%;height:100%;display:${p[1] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:rgb(255,128,0);padding-left:4px;">
      //             <span style="font-size:14px;color:rgb(255,128,0);">${p[1] ? p[1].seriesName : ''}</span>：
      //             <span style="font-size:14px;color:rgb(255,128,0);">${p[1] ? p[1].data : ''}</span>
      //         </div>
      //         <div style="width:100%;height:100%;display:${p[2] ? 'flex' : 'none'};justify-content:space-between;align-items:center;color:#0feb7c;padding-left:4px;">
      //             <span style="font-size:14px;color:#0feb7c;">${p[2] ? p[2].seriesName : ''}</span>：
      //             <span style="font-size:14px;color:#0feb7c;">${p[2] ? p[2].data : ''}</span>
      //         </div>
      //     </div>
      // </div>`
      //     return dom
      //   }
    },
    // 图例组件
    legend: {
      align: "auto",
      left: '5%',
      right: '5%',
      top: '2%',
      type: 'plain',
      textStyle: {
        color: '#ffffff',
        fontSize: 10
      },
      // icon: 'rect',
      image: './images/videoTop.png',
      itemGap: 25,
      itemWidth: 18,

      data: [
        {
          name: '充电订单',
          // 强制设置图形为圆。
          icon: 'circle',
          // 设置文本颜色
          textStyle: {
            color: 'rgba(25,163,223,1)'
          }
        },
        // {
        //   name: '充电次数',
        //   icon: 'diamond',
        //   textStyle: {
        //     color: 'rgb(255,128,0)'
        //   }
        // },
        // {
        //   name: '新增用户',
        //   icon: 'rect',
        //   textStyle: {
        //     color: '#0feb7c'
        //   }
        // }
      ]
    },
    // 直角坐标系内绘图网格
    grid: {
      top: '18%',
      left: '12%',
      right: '5%',
      bottom: '23%',
      // containLabel: true
    },
    //  直角坐标系 grid 中的 x 轴
    xAxis: [{
      type: 'category',
      // name: '充电柜数据',
      nameLocation: 'start',
      boundaryGap: ['20%', '20%'],

      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "#rgb(77,83,141)",
          width: 4
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#7ec7ff',
          padding: 6,
          fontSize: 10
        },
        formatter: function (data) {
          return data
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#192a44',
        },
      },
      axisTick: {
        show: false,
      },
      data: xLabel2
    }],
    yAxis: [{
      nameTextStyle: {
        color: "#7ec7ff",
        fontSize: 10,
        padding: 6
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#192a44'
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#rgb(77,83,141)",
          width: 4
        }

      },
      axisLabel: {
        show: true,
        margin: 1,
        textStyle: {
          color: '#7ec7ff',
          padding: 8,
          fontSize: 8,
        },
        formatter: function (value) {
          var texts = [];
          if (value == 100) {
            texts.push('100');
          }
          else if (value == 200) {
            texts.push('200');
          }
          else if (value == 300) {
            texts.push('300');
          }
          else if (value == 400) {
            texts.push('400');
          }
          else if (value == 500) {
            texts.push('500');
          }
          else if (value == 0) {
            texts.push('0');
          }
          return texts;
        }
      },
      axisTick: {
        show: false,
      },
    }],

    // 连续折线
    series: [{
      name: '充电订单',
      type: 'line',
      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 0,
      lineStyle: {
        normal: {
          width: 2,
          color: "rgba(25,163,223,1)", // 线条颜色
        },
      },
      itemStyle: {
        color: "rgba(25,163,223,1)",

      },
      tooltip: {
        show: true
      },

      data: res12
    },
      // {
      //   name: '充电次数',
      //   type: 'line',
      //   symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      //   showAllSymbol: true,
      //   symbolSize: 0,
      //   lineStyle: {
      //     normal: {
      //       width: 2,
      //       color: "rgb(255,128,0)", // 线条颜色
      //     },
      //   },
      //   itemStyle: {
      //     color: "rgb(255,128,0)",

      //   },
      //   tooltip: {
      //     show: true
      //   },

      //   data: res22
      // }, {
      //   name: '新增用户',
      //   type: 'line',
      //   symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      //   showAllSymbol: true,
      //   symbolSize: 0,
      //   lineStyle: {
      //     normal: {
      //       width: 2,
      //       color: "#0feb7c", // 线条颜色
      //     },
      //   },
      //   itemStyle: {
      //     color: "#0feb7c",

      //   },
      //   tooltip: {
      //     show: true
      //   },

      //   data: res32
      // },
    ]
  };
  let len2 = 0
  setInterval(() => {
    if (len2 === xLabel2.length) {
      len2 = 0
    }
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: len2,
    })
    len2++
  }, 1000)
  myChart.setOption(option2)

  // 折线图end

  // 中间数字start
  var orderNum = ['0', '0', '0', '0', '0', '0', '0', '0'];
  var count = 100;
  // 设置文字滚动
  function setNumberTransform() {
    const numberItems = document.querySelectorAll('.number-item-i') // 获取数字元素
    const numberArr = orderNum.filter(item => !isNaN(item)) // 获取数字数组

    $('.cenTitleTextContent').html(numberArr)
    document.querySelector('.cenTitleTextContent').style = 'font-size: 22px;padding-right: 5px;padding-left: 5px'

    for (let index = 0; index < numberItems.length; index++) {
      const elem = numberItems[index]
      elem.style = `transform:translate(-50%, -${numberArr[index] * 10}%);border:1px solid #1ce6f3;padding: 10px;display: inline-block;color: #74dae5;` // 根据数字数组计算偏移量，并设置 transform 样式

    }
  };
  function toOrderNum(num) {
    num = num.toString()
    if (num.length < 8) {
      num = '0' + num

      // console.log(555, num);
      toOrderNum(num) // 如果未满八位数，递归添加"0"补位

    } else if (num.length === 8) {
      orderNum = num.split('') // 如果满八位数，将其变成数据，渲染至滚动数组
    } else {
      return
    }
  };
  function increaseNumber() {

    var timer = setInterval(() => {
      count = count + getRandomNumber(1, 100) // 随机生成数字
      toOrderNum(count) // 将数字转换为滚动数组
      setNumberTransform() // 根据滚动数组设置数字元素的样式
    }, 3000)
  };
  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
  increaseNumber()
  // 中间数字end



  // console.log("window.sessionStorage.getItem('remark')--", window.sessionStorage.getItem('remark'))
  let remark = window.sessionStorage.getItem('remark')
  if (remark == 1) {   // 中国电信
    document.querySelector('.layout').style = "background-image: url('./images/logo5.png');"
  } else if (remark == 2) {  // 格林赛福
    document.querySelector('.layout').style = "background-image: url('./images/logo3.png');"
  } else if (remark == 3) {
    document.querySelector('.layout').style = "background-image: url('./images/logo4.png');"
  }

  let townListData = [
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 1石基镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 2洛浦街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 3化龙镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 4南村镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 5新造镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 6大石街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 7钟村街道 
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 8石壁街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 9东环街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 10沙头街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 11桥南街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 12小谷围街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 13大龙街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 14石楼镇
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 15市桥街道
    { chargeCabinet: 0, exchangeCabinet: 0, chargingPile: 0 },// 16沙湾街道
  ]

  var markerList = []
  var charge = 0 // 换电柜
  var charging = 0 // 充电柜
  var piles = 0 // 充电桩
  var tempRecordAddress = '' // 点击marker避免重复发请求
  var curMarkerSn = ''
  showtime() // 显示时间
  //  获取设备信息
  let domainNameurl = window.parent.VUE_APP_URL
  $.ajax({
    type: 'POST',
    url: domainNameurl + '/web/device/getDeviceListInfo',
    data: JSON.stringify({}),
    dataType: 'json',
    headers: {
      token: window.sessionStorage.getItem('token'),
      Authorization: window.sessionStorage.getItem('token')
    },
    contentType: 'application/json;charset=utf-8', // 这个参数也是header参数
    success: (res) => {
      //   let latArr = [Number(obj.latlng[1]), Number(obj.latlng[0])]
      // var marker = L.marker(latArr, { draggable: true }).addTo(map)
      // marker.bindTooltip(obj.name).openTooltip()
      // map.setView(latArr, 15)

      // console.log('获取设备信息--', res)

      if (res.code == 200) {

        var list = res.data
        // 删除钟村的数据
        for (var i = 0; i < list.length; i++) {
          if (list[i].id == "1000001749482160"
            || list[i].id == "1000000056545546"
            || list[i].id == "1000000447843649"
            || list[i].id == "1000002079261079") {
            list.splice(i, 1)
            i--
          }
        }
        // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别



        var tradeCabinetList = [] // 换电柜
        var fullCabinetList = [] // 充电柜

        var tradeCabinetTotal = 0
        var fullCabinetTotal = 0
        for (var i = 0; i < list.length; i++) {
          let item = list[i]
          // ----------
          // let lnglatXY = [Number(list[i].lng), Number(list[i].lat)]
          // var geocoder = new AMap.Geocoder({
          //   city: "广州", //城市设为北京，默认：“全国”
          //   radius: 1000 //范围，默认：500
          // });
          // geocoder.getAddress(lnglatXY, (status, result) => {
          //   console.log("result----", result);
          //   if (status === 'complete' && result.info === 'OK') {
          //     item['myTownship'] = result.regeocode.addressComponent.township
          //   } else {
          //     item['myTownship'] = "暂无设备位置";
          //   }
          // });
          // -----------
          // var new_point = new BMap.Point(Number(list[i].lng), Number(list[i].lat))
          // var mk = new BMap.Marker(new_point)
          // // 经纬度
          // var geoc = new BMap.Geocoder()
          // geoc.getLocation(new_point, (rs) => {
          //   console.log("rs-------", rs);
          //   var addComp = rs.addressComponents
          //   // 地址名称
          //   var currentAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
          // })

          // ------
          if (list[i].deviceType == 1) {
            tradeCabinetList.push(list[i]) // 换电柜
            tradeCabinetTotal += 1
          } else if (list[i].deviceType == 3) {
            fullCabinetList.push(list[i]) // 充电柜
            fullCabinetTotal += 1
          }
        }
        $('.fullCabinetTotalNum').html(fullCabinetTotal) //赋值给中间图的充电柜总数
        $('.tradeCabinetTotalNum').html(tradeCabinetTotal)//赋值给中间图的换电柜总数

        // console.log('fullCabinetList', fullCabinetList)
        // console.log('tradeCabinetList--', tradeCabinetList)
        // 换电柜
        for (var i = 0; i < tradeCabinetList.length; i++) {
          for (var j = 0; j < tradeCabinetList[i].deviceInfoDTO.engaged.length; j++) {
            if (
              tradeCabinetList[i].deviceInfoDTO.engaged[j].status == 1 ||
              tradeCabinetList[i].deviceInfoDTO.engaged[j].status == 2
            ) {
              charge += 1
            }
          }
        }
        // 充电柜
        for (var i = 0; i < fullCabinetList.length; i++) {
          for (var j = 0; j < fullCabinetList[i].deviceInfoDTO.engaged.length; j++) {
            if (
              fullCabinetList[i].deviceInfoDTO.engaged[j].status == 1 ||
              fullCabinetList[i].deviceInfoDTO.engaged[j].status == 2
            ) {
              charging += 1
            }
          }
        }

        // console.log('charging--', charging)
        // console.log('charge--', charge)
        // 渲染镇设备运行情况开始
        var chargeList = [] // 换电柜
        var chargingList = [] // 充电柜
        var pilesList = [] // 充电桩
        for (let i = 0; i < list.length; i++) {
          if (list[i].deviceType == 1) {
            // 换电柜
            chargeList.push(list[i])
          } else if (list[i].deviceType == 3) {
            // 充电柜
            chargingList.push(list[i])
          }
        }
        // 充电柜
        var chargingOnline = 0
        var chargingNoline = 0
        // console.log('chargingList---', chargingList)
        for (let i = 0; i < chargingList.length; i++) {
          if (chargingList[i].deviceStatus == 1) {
            chargingOnline += 1
          } else if (chargingList[i].deviceStatus == 2) {
            chargingNoline += 1
          }
        }
        $('.chargingOnline').html(chargingOnline || 0)
        $('.chargingNoline').html(chargingNoline || 0)

        // 换电柜
        var chargeOnline = 0
        var chargeNoline = 0
        var cell = 0 // 充电中
        var suffused = 0 // 电池充满
        var abnormal = 0 // 故障仓
        var notClose = 0 // 未关门
        var noBattery = 0 // 没电池

        var marker = ''
        var dataStr = ''
        // console.log('chargeList---', chargeList)
        for (let i = 0; i < chargeList.length; i++) {
          if (chargeList[i].deviceStatus == 1) {
            chargeOnline += 1
          } else if (chargeList[i].deviceStatus == 2) {
            chargeNoline += 1
          }
        }
        $('.chargeOnline').html(chargeOnline || 0)
        $('.chargeNoline').html(chargeNoline || 0)
        // 渲染镇设备运行情况结束


        let jingweiObj1 = {
          lat: 23.012234, lng: 113.46891, address: '悦堡地产', deviceType: 1,
        }
        let jingweiObj2 = {
          lat: 22.95416, lng: 113.35791, address: '消防救援大队', deviceType: 1,
        }
        let jingweiObj3 = {
          lat: 22.94475, lng: 113.35665, address: '番禺实验中学', deviceType: 2,
        }
        let jingweiObj4 = {
          lat: 22.9550245835481, lng: 113.45658454154967, address: '官涌村幼儿园', deviceType: 2,
        }
        let jingweiObj5 = {
          lat: 22.92707, lng: 113.37182, address: '桥南街道办事处', deviceType: 2,
        }
        let jingweiObj6 = {
          lat: 22.89669, lng: 113.3335, address: '沙湾街西村村民委员会', deviceType: 1,
        }
        let jingweiObj7 = {
          lat: 22.947850104417807, lng: 113.49194737371062, address: '石楼亚运城天峯1区', deviceType: 2,
        }
        let jingweiObj8 = {
          lat: 22.948344091374512, lng: 113.49228533204649, address: '石楼亚运城天峯2区', deviceType: 5,
        }
        let jingweiObj9 = {
          lat: 22.945073864179562, lng: 113.49236579831694, address: '石楼亚运城天峯3区(正门)', deviceType: 4,
        }
        let jingweiObj10 = {
          lat: 22.944975064545286, lng: 113.4945008366928, address: '石楼亚运城天峯3区(东门)', deviceType: 2,
        }

        list.push(jingweiObj1, jingweiObj2, jingweiObj3, jingweiObj4, jingweiObj5, jingweiObj7, jingweiObj8, jingweiObj9, jingweiObj10)

        console.log(list);

        for (var i = 0; i < list.length; i++) {

          // console.log('list[i].lat---', list[i].lat) 
          // console.log('list[i].lng---', list[i].lng)
          // 拿到经纬度
          let latArr = [Number(list[i].lat), Number(list[i].lng)]
          // BM.Marker用于在地图上显示可点击/可拖动的图标。L 等于 BM

          var mymarker = L.marker(latArr, {
            icon: L.icon({ iconUrl: './images/mapIcon.png', iconSize: [18, 18] })
          }, { draggable: false }, { riseOnHover: true }).addTo(map)

          // 地图上设备的提示文本 bindTooltip 广州市番禺区港派产业园
          // 增加if判断，优化重叠
          // if (list[i].address == '广州市番禺区万科金色城品') {
          //   mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
          //     direction: 'bottom',
          //     permanent: false
          //   }).openTooltip()
          // }
          // else if (list[i].address == '广州市番禺区万科金色城品(德贤路)-公交车站') {
          //   mymarker.bindTooltip('万科金色城品(德贤路)-公交车站' + ':' + list[i].deviceType + '台设备', {
          //     direction: 'top',
          //     permanent: true,
          //     className: 'jinsewangke'

          //   }).openTooltip()
          // }
          // else if (list[i].address == '港派') {
          //   mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
          //     direction: 'top',
          //     permanent: true,
          //     className: 'jinsewangkes'
          //   }).openTooltip()
          // }
          // else if (list[i].address == '佛山市南海区周日电商园') {
          //   mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
          //     direction: 'rigth',
          //     permanent: true,
          //     // className: 'jinsewangkess'

          //   }).openTooltip()
          // }

          // else {
          //   mymarker.bindTooltip(list[i].address + ':' + list[i].deviceType + '台设备', {
          //     direction: 'top',
          //     permanent: false,
          //   }).openTooltip()
          // }

          mymarker.myObj = {
            itemObj: list[i]
          }

          var flag = '' // 避免重复发请求
          // 点击地图上的点，触发的事件
          mymarker.on('click', function (e) {
            console.log(22222222222222);
            let shujiyuan = e.target.myObj.itemObj
            console.log(shujiyuan);
            // if (shujiyuan.address = '万科金色城品') {
            //   console.log(list);
            //   mymarker.bindTooltip(shujiyuan.address + ':' + shujiyuan.deviceType + '台设备', {
            //     direction: 'left',
            //     permanent: true,
            //   }).openTooltip()
            // }


            curMarkerSn = e.target.myObj.itemObj.sn
            setTimeout(() => {
              tempRecordAddress = e.target.myObj.itemObj.address
            }, 10)

            if (tempRecordAddress === e.target.myObj.itemObj.address) {
              return false
            }


            else if (e.target.myObj.itemObj.address == '广东省广州市番禺区沙湾街道') { //广东省广州市番禺区沙湾街道  广州市番禺区官涌幼儿园
              document.getElementById('rechargeAnswer').style.display = 'none'//让充电占比隐藏
              document.getElementById('monitoringCount').style.display = 'none'//让视频监控数量隐藏

              document.getElementById('monitoring').style.display = 'block'//让视频监控显示
              // 开启监控视频
              new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,//自动播放
                url: 'ezopen://open.ys7.com/J28314721/1.hd.live',
                accessToken: 'at.016irch50h47pmuk7hen6d5m77z95ule-1e7qfmmfw7-0vgub32-8cfekszbe',
                // decoderPath: './',
                decoderPath: '.',
                width: 500,
                height: 300
              })
            }



            else if (e.target.myObj.itemObj.address == '广州市番禺区万科金色城品') {

              document.getElementById('rechargeAnswer').style.display = 'none'
              document.getElementById('monitoringCount').style.display = 'none'

              document.getElementById('monitoring').style.display = 'block'

              // document.getElementById('playWind').style.maxWidth = '9.96rem'
              // document.getElementById('playWind').style.maxHeight = '6.46rem'

              let url = 'ezopen://open.ys7.com/J51954312/1.hd.live'
              let url2 = 'ezopen://open.ys7.com/J51954395/1.hd.live'
              // // 开启监控视频
              let video = {
                id: 'playWind',
                autoplay: true,
                url: `${url},${url2}`,
                accessToken: 'at.a487hfxl79s1ofsc3r8jimu23pp9yc6a-4ck0gfkf2p-0w20tmp-aapkv3cpi',
                // decoderPath: './',
                decoderPath: '.',
                width: 500,
                height: 300,
                splitBasis: 2

              }
              new EZUIKit.EZUIPlayer(video)

            }
            else if (e.target.myObj.itemObj.address !== '广州市番禺区万科金色城品' || e.target.myObj.itemObj.address == '广东省广州市番禺区沙湾街道') {
              document.getElementById('first_level').style.display = 'block'
              document.getElementById('second_level1').style.display = 'none'
            }




            noBattery = 0 // 没电池
            cell = 0 // 充电中
            suffused = 0 // 电池充满
            abnormal = 0 // 故障仓
            notClose = 0 // 未关门
            console.log('点击了marker', e)

            let itemObj = e.target.myObj.itemObj
            let sn = e.target.myObj.itemObj.sn
            let engagedList = e.target.myObj.itemObj.deviceInfoDTO.engaged
            setTimeout(() => {
              flag = sn
            }, 100)
            for (let j = 0; j < engagedList.length; j++) {
              // console.log('engagedList[j].status--', engagedList[j].status)
              if (engagedList[j].status === 0) {
                noBattery += 1
              } else if (engagedList[j].status === 1) {
                cell += 1
              } else if (engagedList[j].status === 2) {
                suffused += 1
              } else if (engagedList[j].status === 3) {
                abnormal += 1
              }
              if (engagedList[j].cabinetStatus === 1) {
                notClose += 1
              }
            }
            // console.log('list[i].address---', list[i].address)
            // 添加设备详情数据
            dataStr = `
                <p>设备名称: <span>${itemObj.deviceName}</span></p>
                <p>设备地址:  <span>${itemObj.address}</span></p>
                <p>设备状态: <span>${itemObj.deviceStatus == 1
                ? '在线'
                : itemObj.deviceStatus == 2
                  ? '离线'
                  : itemObj.deviceStatus == 3
                    ? '设备故障'
                    : '---'
              }</span></p>
                <p>设备类型: <span>${itemObj.deviceType == 1
                ? '换电柜'
                : itemObj.deviceType == 2
                  ? '租车'
                  : itemObj.deviceType == 3
                    ? '充电柜'
                    : '---'
              }</span></p>
                <p>使用时间: <span>${formatSeconds(
                itemObj.deviceInfoDTO.serverTime
              )}</span></p>
                <p>空仓: <span>${noBattery}</span></p>
                <p>充电中: <span>${cell}</span></p>
                <p>未关门: <span>${notClose}</span></p>
                <p>满电: <span>${suffused}</span></p>
                <p>故障仓: <span>${abnormal}</span></p>
                <p>总订单: <span>${itemObj.deviceInfoDTO.totalOrder}</span></p>
                <p>收费标准: <span>充电柜1元3小时, 换电柜月租299</span></p>`
            document.getElementById('first_level').style.display = 'block'
            document.getElementById('second_level').style.display = 'none'
            document.getElementById('second_level1').style.display = 'none'
            document.querySelector('#second_level #faultInfo').style.display = 'none'
            document.querySelector('.lSecondBox .content').style.display = 'block'

            $('.lSecondBox .content').html(dataStr) // 把数据添加到设备详情栏中

            // 打开视频监控时的报警信息栏
            if (sn !== flag) {
              $.ajax({
                type: 'get',
                url: domainNameurl + '/web/alarm/list',
                data: {
                  sn: sn,
                  pageNum: 1,
                  pageSize: 10
                },
                headers: {
                  token: window.sessionStorage.getItem('token'),
                  Authorization: window.sessionStorage.getItem('token')
                },
                dataType: 'json',
                contentType: 'application/json', // 这个参数也是header参数
                // dataType: 'html',
                success: (res) => {
                  console.log('res---', res)
                  if (res.code == 200) {
                    let rowsList = res.rows
                    var str = ''
                    for (var i = 0; i < 3; i++) {
                      str += `
                            <li class="" id="goToAlarmInfo">
                              <span class="icon-dot"></span>
                              <div class="num">
                                ${i + 1}.
                              </div>
                              <div class="lastDiv">
                                <div class="devTime">报警时间: ${rowsList[i].stime}</div>
                                <div class="sn">设备编号: ${rowsList[i].sn}</div>
                                <div class="alarm">报警信息: ${rowsList[i].alarm}</div>
                              </div>
                            </li>
                          `
                    }
                    $('.alarmInfo .list').children().remove()
                    $('.alarmInfo .list').html(str)// 把数据添加到报警信息栏中
                  }
                }
              })
            }
          })
        }

        // for循环结束
        // ------------------------
      }
    }
  })

  // 正常页面的报警信息
  function getAlarmInfo() {

    $.ajax({
      type: 'get',
      url: domainNameurl + '/web/alarm/list',
      data: {
        pageNum: 1,
        pageSize: 10
      },
      headers: {
        token: window.sessionStorage.getItem('token'),
        Authorization: window.sessionStorage.getItem('token')
      },
      dataType: 'json',
      contentType: 'application/json', // 这个参数也是header参数
      // dataType: 'html',
      success: (res) => {
        if (res.code == 200) {
          let list = res.rows
          var str = ''
          for (let i = 0; i < 3; i++) {
            str += `
          <li class="" id="goToAlarmInfo" >
            <span class="icon-dot"></span>
            <div class="num">
              ${i + 1}.
            </div>
            <div class="lastDiv">
              <div class="">报警时间: ${list[i].stime}</div>
              <div>设备编号: ${list[i].sn}</div>
              <div class="">报警信息: ${list[i].alarm}</div>
            </div>
          </li>
         `
          }

          $('.alarmInfo .list').children().remove()
          $('.alarmInfo .list').html(str)
        }
      }
    })
  }

  // 点击报警信息跳转报警信息页面
  getAlarmInfo()
  $(document).on("click", '#goToAlarmInfo', () => {
    if (curMarkerSn) {
      window.parent.$router.push({
        path: `visual-alarmInfo?sn=${curMarkerSn}`
      })
    } else {
      window.parent.$router.push({
        name: `visual-alarmInfo`
      })
    }
  });



</script>


</html>

<script src="./js/initGeoJSON.js"></script>
<script src="./js/getLocation.js"></script>
<!-- 充电占比的动态显示 -->
<script src="./js/chargeRatio.js"></script>